import CodeView from '../../../shared/components/CodeView';
import CodeBlock from '../../../shared/components/CodeBlock';
import Blockquote from '../../../shared/components/Blockquote';
import { getDisplayElementById } from '../../shared/helpers';
import * as ActivityTimelineExamples from './base/example';
import { ActivityTimeline } from './base/example';

<div className="doc lead">
  The activity timeline displays each of the user’s upcoming, current, and past
  activities.
</div>

<CodeView exampleOnly>{getDisplayElementById(ActivityTimelineExamples.default)}</CodeView>

## About Activity Timeline

Each Activity timeline item receives its width from the parent list. It can consume the full width of the main page area or be placed in the smaller right sidebar.

### Accessibility

Text describing the type of timeline item is placed in a `span`. It is the first element in the timeline item and should be hidden with the `slds-assistive-text` class. The `SVG` image does not need the `slds-assistive-text` class.

#### Markup

**Button:**

- `aria-controls` is used to create an association between the button and the details section. If the details section has an `id="email-content"`, then the button should have `aria-controls="email-content"`.
- The title of the timeline item can also be used as a button to open the details section. If the details section has an `id="email-content"`, then the div with `slds-timeline__trigger` should have `aria-controls="email-content"` and the click handler.
- `aria-expanded` indicates if the details section is open or closed and is read aloud by assistive technology when the button is focused.

**Section:**

- `hidden` indicates if the details section is open or closed, and if set to `true`, assistive technology hides the details section.

#### Keyboard Interactions

- The button should behave as a normal button. The user should be able to tab to focus it and press enter/space to activate it.

## Base

<CodeView>{getDisplayElementById(ActivityTimelineExamples.default)}</CodeView>

## States

### Expanding sections

<Blockquote type="a11y" header="Accessibility Note">
  <p>
    When the user interacts with the button to open the details section, <code>aria-expanded</code> on the button should be <code>true</code> and <code>hidden</code> on the details section should be <code>false</code>.
  </p>
  <p>
    When the user interacts with the button to close the details section, <code>aria-expanded</code> on the button should be <code>false</code> and <code>hidden</code> on the details section should be <code>true</code>.
  </p>
</Blockquote>

#### Single Item Expanded

<CodeView>
  {getDisplayElementById(ActivityTimelineExamples.states, 'expanded-single')}
</CodeView>

#### Multiple Items Expanded

<CodeView>
  {getDisplayElementById(ActivityTimelineExamples.states, 'expanded')}
</CodeView>

### Error

<CodeView>
  {getDisplayElementById(ActivityTimelineExamples.states, 'error-single')}
</CodeView>

## Narrow Region Example

<CodeView>
  {getDisplayElementById(ActivityTimelineExamples.examples, 'narrow')}
</CodeView>
